// 引入vue路由
import VueRouter from "vue-router";
// 引入About组件
import About from "../pages/About";
// 引入Home组件
import Home from "../pages/Home";
// 引入Home嵌套子组件Message组件
import Message from "../pages/Message";
// 引入Home嵌套子组件News组件
import News from "../pages/News";
// 引入Home嵌套子组件News组件的嵌套子组件Detail组件
import Detail from "../pages/Detail";


// 创建并暴露路由
export default new VueRouter({
    routes:[
        // 一级路由
        {
            name:'about',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                // 二级路由
                {
                    path:'message',
                    component:Message,
                    children:[
                        // 三级路由
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail,
                            // 路由的props配置，能够让路由对应的组件内通过props接收到指定参数
                            // 第1种props配置，值为对象，值相当于写死了，不推荐这种写法
                            // props:{name:"Alex",age:18}

                            // 第2种props配置，值为布尔值
                            // 这种方式表示将params的值通过props传入对应组件，对应组件
                            // 还是通过props来接收，这种方式并不支持接收query传递的参数
                            // props:true,

                            // 第3种props配置，值为函数，强烈推荐！
                            // 函数形式，函数会接收到目标组件的$route，即可通过$route访问到query和params
                            // 注意，该返回值必须为一个对象，这些对象的key-value则是目标组件能够接收到的参数
                            props($route){
                                return {id:$route.query.id,title:$route.query.title}
                            }
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]
        },
    ]
})